<template>
  <div class="gold">
    <div class="plum">
       <van-icon name="arrow-left" />
      <span> 排行版 </span>
      <span></span>
    </div>
    <div class="black">
      <video
        src="http://www.w3school.com.cn/i/movie.ogg"
        controls="controls"
      ></video>
      <p>心悦商城！直播屋内精装格局</p>
    </div>
    <div class="black">
      <van-notice-bar
        left-icon="tv-o"
        background="#fff"
        color="#ccc"
        text="2019-09-23：14:24开启直播，欢迎收看，万千豪礼等你来拿。"
      />
      <video
        src="http://www.w3school.com.cn/i/movie.ogg"
        controls="controls"
      ></video>
      <p>心悦商城！直播屋内精装格局</p>
      <div class="butty">
          <van-icon name="setting" />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.plum {
  width: 100%;
  height: 50px;
  background: cornflowerblue;
 display: flex;
 justify-content: space-between;
 padding: 0 20px;
 align-items: center;
  color: white;
  font-size: 16px;
}
.black {
  margin-left: 28px;
  margin-top: 10px;
}
.black p {
  padding-top: 15px;
  font-weight: bold;
  font-size: 25px;
}
.butty{
  width:80px;
  height:80px;
  
  position: absolute;
 bottom: 50px;
  right: 20px;
  i{
    width: 100%;
    height: 100%;
    font-size: 50px;
    border-radius: 50%;
    background: #40FFDF;
    color:#40DFFF ;
    text-align: center;
    line-height: 80px;
  }
}
</style>